<template>
	<view class="content">
		<view class="header">
			<view class="header_title">首页</view>
			<view class="header_select">
				<view class="header_select_left">
					<picker @change="bindPickerChange" :value="index" :range="campus" :id="campus[index].id" range-key="title">
						<view>{{ campus[index].title }}</view>
					</picker>
					<text class="iconfont icon-arrow-down"></text>
				</view>
				<view class="header_select_right">
					<text class="iconfont icon-sousuo"></text>
					<input type="text" placeholder="搜索关键字" class="inp" />
				</view>
			</view>
			<view class="header_nav">
				<view class="header_nav_york nav_bodr" @click="$utils.navTo('/pages/reserve/reserve')">
					<view class="header_nav_york_icon  header_nav_boed"><text class="iconfont icon-time  imso"></text></view>
					<text class="text">约课</text>
				</view>
				<view class="header_nav_leave nav_bodr" @click="$utils.navTo('/pages/recess/recess')">
					<view class="header_nav_leave_icon header_nav_boed"><text class="iconfont icon-biaoqing-dai imso"></text></view>
					<text class="text">请假记录</text>
				</view>
				<view class="header_nav_Pin nav_bodr" @click="$utils.navTo('/pages/cancelclass/cancelclass')">
					<view class="header_nav_Pin_icon header_nav_boed"><text class="iconfont icon-yijianfankui imso"></text></view>
					<text class="text">销课统计</text>
				</view>
				<view class="header_nav_job nav_bodr">
					<view class="header_nav_job_icon header_nav_boed"><text class="iconfont icon-a-topliontubiaoku_mingdanguanli imso"></text></view>
					<text class="text">作业查看</text>
				</view>
			</view>
		</view>
		<view class="imgAi"><image class="img" src="../../assets/img/Aibackg.jpg" mode=""></image></view>
		<view class="navigation">
			<view class="navgation_content">
				<view class="navgation_content_box">
					<view :class="this.show == 1 ? 'titleOcean' : 'dynamic'" @click="nav(1)">学校动态</view>
					<view :class="this.show == 2 ? 'titleOcean' : 'dynamic'" @click="nav(2)">课程介绍</view>
					<view :class="this.show == 3 ? 'titleOcean' : 'dynamic'" @click="nav(3)">学校简介</view>
					<view :class="this.show == 4 ? 'titleOcean' : 'dynamic'" @click="nav(4)">联系方式</view>
				</view>
			</view>
			<!--学校动态-->
			<view class="Box_dynamic" v-if="show == 1">
				<view class="Box_dynamic_ul">
					<view class="Box_dynamic_li" v-for="(item, index) in this.dynamicList" :key="index">
						<image :src="url + item.pic" style="object-fit: cover;" mode="aspectFill" class="li_image"></image>

						<view class="Box_dynamic_right">
							<view style="font-size:28rpx;color:#000;margin-bottom:20rpx" class="titleData">{{ item.title }}</view>
							<view>校园资讯 {{ item.hits }}评</view>
							<view>{{ item.addtime }}</view>
						</view>
					</view>
					<view class="grace-loading" v-if="isLoadAll">{{ loadingTxt }}</view>
				</view>
			</view>
			<!--课程介绍-->
			<view class="Box_introduced" v-if="show == 2"><view v-html="IntroducedContent"></view></view>
			<!--学校简介-->
			<view class="Box_overview" v-if="show == 3"><view v-html="SchoolinfoData"></view></view>
			<!--联系方式-->
			<view class="Box_contact" v-if="show == 4">
				<view class="Box_contavc_li" v-for="(item, index) in this.AddressList" :key="index">
					<view style="font-weight:500;height:105rpx;font-size:45rpx;">{{ item.title }}</view>
					<view>
						<view class="Box_contavc_li_modile">
							<text class="iconfont icon-dianhua" style="color:#3eb5f9;margin-right:15rpx;font-size:28rpx;"></text>
							{{ item.tel }}
						</view>
						<view class="Box_contavc_li_region">
							<text class="iconfont  icon-dingwei" style="color:#3eb5f9;margin-right:15rpx;margin-top:5rpx;font-size:28rpx"></text>
							<view style="font-size:30rpx">{{ item.address }}</view>

							<text class="iconfont icon-arrow-right" style="color:#3eb5f9;margin-left:5rpx;margin-top:7rpx;font-size:28rpx"></text>
						</view>
					</view>
					<view style="margin-top:30rpx;"><button class="bottn" @click="phone(item.tel)" type="default">拨打电话联系</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { IMGBASEURL } from '../../utils/config.js';

import { NewsList, CourseinfoGet, Introduced, AddressList, CampusList } from '../../api/home/home.js';

export default {
	data() {
		return {
			campus: [],
			index: 0,

			url: IMGBASEURL,
			isLoadAll: 'false', //下拉提示加载中
			loadingTxt: '加载中...', //下拉提示加载中
			show: 1, //切换数据
			IntroducedContent: '', //课程介绍
			dynamicList: [], //学校动态
			dyNameParams: {
				page: 1,
				psize: 10,
				totalPages: 0,
				companyid: 1
			}, //学校动态请求
			AddressList: [], //联系方式
			AddressParams: {
				page: 1,
				psize: 10
			}, //联系方式请求
			CampusData: [], //校区渲染
			CampusParams: {
				page: 1,
				psize: 10
			}, //联系方式请求
			CourseinfoData: [], //校区渲染
			CourseinfoParams: {
				page: 1,
				psize: 10,
				companyid: 1
			} //联系方式请求
		};
	},
	onPullDownRefresh() {
		this.dyNameParams.page = 1;
		this.dynamicList = [];
		this.AddressParams.page = 1;
		this.AddressList = [];
		this.CampusParams.page = 1;
		this.CampusData = [];
		this.GetIntroduced();
		this.GetDynamic();
		this.GetAddress();
		uni.stopPullDownRefresh();
	},
	onLoad() {
		this.index = 0;
		//获取课程介绍
		this.GetIntroduced();
		//获取学校动态
		this.GetDynamic();
		//获取联系方式
		this.GetAddress();
		//获取校区渲染
		this.GetCampusList();
		//获取学校介绍
		this.CourseinfoGetContent();
	},

	onReachBottom() {
		// 判断当前页是否大于等于总页数
		if (this.dyNameParams.totalPages <= this.dyNameParams.page) {
			this.isLoadAll = true;
			this.loadingTxt = '没有更多数据啦~';
		} else {
			this.dyNameParams.page++;
			this.isLoadAll = true;
			this.loadingTxt = '加载中...';
			this.GetDynamic(); // 每次滑动请求接口，实现上拉加载更多数据
		}
	},
	methods: {
		phone(data) {
			uni.makePhoneCall({
				phoneNumber: data //仅为示例
			});
		},

		bindPickerChange(e) {
			console.log(e);
			this.index = e.detail.value;

			uni.setStorageSync('companyid', Number(e.currentTarget.id));
		},

		//校区渲染
		async GetCampusList() {
			const res = await CampusList(this.CampusParams);
			if (res.errCode == '10000') {
				this.campus = res.data.list;
			}
		},

		//学校动态
		async GetDynamic() {
			const res = await NewsList(this.dyNameParams);
			if (res.errCode == '10000') {
				this.dyNameParams.totalPages = res.data.pageCounts;
				this.dynamicList = [...this.dynamicList, ...res.data.list];
			}
		},
		//课程接口
		async GetIntroduced() {
			const res = await Introduced();
			if (res.errCode == '10000') {
				this.IntroducedContent = res.data.content;
			}
		},
		//联系方式
		async GetAddress() {
			const res = await AddressList(this.AddressParams);
			if (res.errCode == '10000') {
				this.AddressList = res.data.list;
			}
		},
		//学校介绍
		async CourseinfoGetContent() {
			const res = await CourseinfoGet(this.CourseinfoParams);
			if (res.errCode == '10000') {
				this.SchoolinfoData = res.data.content;
			}
		},
		//切换数据
		nav(data) {
			this.show = data;
		}
	}
};
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
